<template>
	<view>
		<view class="">
			<view class="sortBox _flex align-items_center _justify_between">
				<u-dropdown ref="uDropdown" @open="open" active-color="#0e2a55" duration='0'>
					<u-dropdown-item v-model="searchData.orderString" :title="form.typeSort" :options="sortList" @change="changeOrderString"></u-dropdown-item>
					<u-dropdown-item v-model="searchData.sellingPrice" :title="form.priceSort" :options="priceList" @change="changeSellingPrice"></u-dropdown-item>
					<u-dropdown-item v-model="searchData.rechargeMileage" :title="form.rechargeMileage" :options="rechargeMileageList" @change="changeRechargeMileageList"></u-dropdown-item>
					<u-dropdown-item title="品牌"></u-dropdown-item>
				</u-dropdown>
			</view>

			<view class="dropdown-item" v-if="carSelected.length>0">
				<view class="select_item" v-for="(item,index) in carSelected" :key="index" v-if="item.label"  @click="closeSelected(index,item.id)">
					{{item.label}}
					<u-icon size="20" name="close"></u-icon>
				</view>
			</view>
			<view class="page" v-if="dataList.length > 0">
					<view class="tab-list-li">
						<view class="car-list-item" v-for="(item,index) in dataList" :key="index" @click="goNewCarDetail(item.seriesId)">
							<view class="item-img">
								<image <image :src="item.seriesLogo?https+item.seriesLogo : '../../static/no_carpicture.jpg'" mode="aspectFill"></image></view>
							<view class="item-text">
								<view class="item-text-title">{{item.seriesName}}</view>
								<view class="item-text-title2">指导价：{{item.guidePriceMin}} - {{item.guidePriceMax}}万</view>
								<view class="item-text-title3">纯电续航：{{item.rechargeMileageMin}}<text v-if="item.rechargeMileageMin!=item.rechargeMileageMax">-{{item.rechargeMileageMax}}</text> KM</view>
							</view>
						</view>
					</view>
			<!-- 	</view> -->
                <view class="" style="padding: 30rpx 0;">
                	<u-loadmore :status="status" :load-text="loadText" />
                </view>
				
			</view>
			<null :iconSize="160" :textSize="28" v-else></null>
		</view>
	
	</view>
</template>

<script>
	import API from "@/api/buycar.js"
	import app from "../../App.vue"
	export default {
		name: 'buyCar',
		data() {
			return {
				https: getApp().globalData.picturePath,
				form: {
					typeSort: "默认排序",
					priceSort: "价格",
					rechargeMileage:'续航'
				},
				sortList: [],
				priceList: [{
						value: '1',
						label: '不限',
						sellingPriceUp: "", //售价 前区间
						sellingPriceDown: "", //售价 后区间
					},
					{
						value: '2',
						label: '3万以下',
						sellingPriceUp: 0,
						sellingPriceDown: 3
					},
					{
						value: '3',
						label: '3-5万',
						sellingPriceUp: 3,
						sellingPriceDown: 5
					},
					{
						value: '4',
						label: '5-10万',
						sellingPriceUp: 5,
						sellingPriceDown: 10
					},
					{
						value: '5',
						label: '10-15万',
						sellingPriceUp: 10,
						sellingPriceDown: 15
					},
					{
						value: '6',
						label: '15-20万',
						sellingPriceUp: 15,
						sellingPriceDown: 20
					},
					{
						value: '7',
						label: '20-30万',
						sellingPriceUp: 20,
						sellingPriceDown: 30
					},
					{
						value: '8',
						label: '30-40万',
						sellingPriceUp: 30,
						sellingPriceDown: 40
					},
					{
						value: '9',
						label: '40万以上',
						sellingPriceUp: 40,
						sellingPriceDown: ""
					},
				],
				rechargeMileageList:[
					{value:"1",label:'300km以内',rechargeMileageMin:300,rechargeMileageMax:""},
					{value:"2",label:'300-400km',rechargeMileageMin:400,rechargeMileageMax:300},
					{value:"3",label:'400-500km',rechargeMileageMin:400,rechargeMileageMax:500},
					{value:"4",label:'500-600km',rechargeMileageMin:600,rechargeMileageMax:500},
					{value:"5",label:'600km以上',rechargeMileageMin:"",rechargeMileageMax:600}
				],
				// hotBrandList:[],
				// newCarList:[],
				// indexList:[],
				checkJson:null,
				searchData: { //筛选的数据
				    page: 1,
				    limit: 10,
					brandId: "",
					seriesName:"",
					rechargeMileage:"",
					sellingPrice: "",
					guidePriceMin: "", //售价 前区间
					guidePriceMax: "", //售价 后区间
					orderString: "", //排序字段 由下面二手车排序接口获得
	
					rechargeMileageMin: "", //行驶里程 前区间
					rechargeMileageMax: "",
					seriesName:"",
					brandName:""
				},

				count: 0,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				// list: 1,
				// page: 1,
				// limit: 10,
				// seriesId: '',
				carSelected: [

				],
	
				dataList: [], //二手车数据列表
				// newLogoList: [],
				// scrollTop: 0,
				// isIndexShow: false,
				

			};
		},
		onLoad(options) {
			var that = this
			if(options.price){
				const priceJson = JSON.parse(decodeURIComponent(options.price));
				console.log(priceJson);
				that.searchData.guidePriceMax = priceJson.guidePriceMax
				that.searchData.guidePriceMin = priceJson.guidePriceMin
			}
			if(options.brand){
				const brandJson = JSON.parse(decodeURIComponent(options.brand));
				console.log(brandJson);
				that.searchData.brandName = brandJson.brandName
				that.searchData.brandId = brandJson.brandId
			}
			if(options.input){
				that.searchData.seriesName = options.input
			}
		},

		onShow() {
			let that = this
			const json = getApp().globalData.carType
			if (json) { //将app中选中的车辆信息带回来

				that.searchData.brandName = json.brandName ? json.brandName :"";
				that.searchData.brandId = json.brandId ? json.brandId : "";
				app.globalData.carType = "" //清空app中的值
			}
			that.getOrderList(); //二手选车排序
		    that.getSelectedData(); //自定义 获取选中的数据
			that.getNewCarBrushList();
		},
		
		onReachBottom() {
				uni.showLoading({
					title: this.status,
				});
				this.status = 'loading';
				this.searchData.page = this.searchData.page + 1;
					API.getNewCarBrushList(this.searchData).then(res => {
						console.log("5435345");
						console.log(res.data.data);
						this.dataList = this.dataList.concat(res.data.data)
						console.log(this.dataList);
						this.count = res.count
						if (this.searchData.page * this.searchData.limit >= this.count) {
							this.status = 'nomore';
						} else {
							this.status = 'loadmore';
						}
					})
		},

		methods: {
		goNewCarDetail(seriesId){
			console.log(seriesId)
			uni.navigateTo({
				url: '/pagesA/buyCar/newCarDetail?seriesId=' + seriesId
			})
		},
			getSelectedData(){
		        var price = null
				if(!this.searchData.guidePriceMax && this.searchData.guidePriceMin !=0 ){
					 price = this.searchData.guidePriceMin + "万以上"
				}
				else if(!this.searchData.guidePriceMax && this.searchData.guidePriceMin ==0 ){
					 price = ""
				}
				else if(this.searchData.guidePriceMax && !this.searchData.guidePriceMin ){
					 price = this.searchData.guidePriceMax +"万以内"
				}
				else{
					price = this.searchData.guidePriceMin + '万-' + this.searchData.guidePriceMax + '万'
				}
				var rechargeMileag = null
				if(this.searchData.rechargeMileageMax && !this.searchData.rechargeMileageMin){
					 rechargeMileag = this.searchData.rechargeMileageMax + "km以内"
				}
				else if(this.searchData.rechargeMileageMax && this.searchData.rechargeMileageMin){
					 rechargeMileag =this.searchData.rechargeMileageMin + 'km-' + this.searchData.rechargeMileageMax +'km'
				}
				else if(!this.searchData.rechargeMileageMax && this.searchData.rechargeMileageMin){
					 rechargeMileag =this.searchData.rechargeMileageMin + 'km以上' 
				}
				else{
					rechargeMileag = ""
				}
			   this.carSelected=[
				 
				   {
					 selectedName:'品牌:',
					 label:this.searchData.brandName,
					 id:"brandId"
				   },
				   {
					 selectedName:'车价:',
					 label:price,
					 id:"sellingPrice"
				   },
				  
				   {
					 selectedName:'续航里程:',
					 label:rechargeMileag,
					 id:"rechargeMileage"
				   },
				   {
					 selectedName:'模糊查询:',
					 label:this.searchData.seriesName,
					 id:"seriesName"
				   },
				  
			   ]
			   console.log(this.carSelected);
			},
			open(index) { 
				if (index == 3) {
					this.$refs.uDropdown.close();
					uni.navigateTo({
						url: "../selectCar/selectCarBuyCarNewCar"
					})
				} 
			},
			// 获取车辆列表
			getNewCarBrushList() {
				console.log(this.searchData);
				API.getNewCarBrushList(this.searchData).then(res => {
					this.dataList = res.data.data
					console.log(this.dataList);
					this.count = res.count
				})
				if (this.searchData.page * this.searchData.limit >= this.count) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
			},


			closeSelected(index,id) {
				console.log(index);
				if(id == 'brandId'){
					// this.searchData.seriesId = "";
					this.searchData.brandId = "";
					// this.searchData.seriesName = "";
					this.searchData.brandName = "";
					if(this.checkJson){
						this.checkJson.brandId="";
						// this.checkJson.seriesId="";
						this.checkJson.brandName="";
					}
					// this.carSelected[1].label=""
				}
				if(id == 'sellingPrice'){
					this.searchData.guidePriceMin = "";
					this.searchData.guidePriceMax = "";
				}
				// if(id == 'vehicleStructure'){
				// 	this.searchData.vehicleStructure = "";
				// 	this.searchData.vehicleStructureData = ""
				// }
				
				if(id == 'rechargeMileage'){
					this.searchData.rechargeMileageMin = "";
					this.searchData.rechargeMileageMax = "";
					// this.searchData.xuhang =  "";
				}
				if(id == 'seriesName'){
					this.searchData.seriesName = "";
				}
				
				this.carSelected[index].label=""
				this.getNewCarBrushList();
			},
			getOrderList() { //默认排序下拉数据
				API.getNewCarOrderList().then(res => {
					this.sortList = res.data
				})
			},
			changeOrderString(e) {
				console.log(e);
				var orderStringObj = this.sortList.find((val, index) => {
					return (val.value == e);
				});
				this.form.typeSort = orderStringObj.label;
				this.searchData.orderString = e;
				this.getNewCarBrushList();
			},
			changeSellingPrice(e) {
				console.log(e);
				var priceObj = this.priceList.find((val, index) => {
					return (val.value == e);
				});
				console.log(priceObj);
				this.searchData.guidePriceMin = priceObj.sellingPriceUp
				this.searchData.guidePriceMax = priceObj.sellingPriceDown
				console.log(this.searchData);
				if(e==1){
					this.carSelected[1].label = "";
				}
				else{
					this.carSelected[1].label = priceObj.label;
				}
				this.getNewCarBrushList();
			},
			changeRechargeMileageList(e) {
				console.log(e);
				var rechargeMileageObj = this.rechargeMileageList.find((val, index) => {
					return (val.value == e);
				});
				console.log(rechargeMileageObj);
				this.searchData.rechargeMileageMin = rechargeMileageObj.rechargeMileageMin
				this.searchData.rechargeMileageMax = rechargeMileageObj.rechargeMileageMax
				console.log(this.searchData);
				if(e==1){
					this.carSelected[2].label = "";
				}
				else{
					this.carSelected[2].label = rechargeMileageObj.label;
				}
				// this.form.rechargeMileage =  rechargeMileageObj.label;
				this.getNewCarBrushList();
			},


			// 排行榜
			// rankingList(e) {
			// 	console.log(e)
			// 	uni.navigateTo({
			// 		url: "../rankingList/rankingList?active=" + e
			// 	})
			// },
			// 新车条件筛选-多选
			imgChecked(e) {
				let check = e.checked
				console.log(check)
				e.checked = !check
			},
			usedCarDetail(e) {
				uni.navigateTo({
					url: "./usedCarDetail"
				})
			},
			newCarDetail(e) {
				uni.navigateTo({
					url: "./newCarDetail"
				})
			},
			
			// search() {
			// 	uni.navigateTo({
			// 		url: "../index/search"
			// 	})
			// },
			pinpai() {
				uni.navigateTo({
					url: "../selectCar/selectCarBuyCar"
				})
			},

			tabNewChange(idx) {
				this.active = idx
			},
			
			
			
			getHotBrand(){//新车热门品牌
				API.getHotBrand().then(res=>{
					this.hotBrandList = res.data
					console.log(this.hotBrandList)
				})
			}
			
		}
	};
</script>
<style>
	page {
		background: #FFFFFF;
	}
</style>
<style scoped lang="scss">
	.hearder {
		text-align: center;
		margin-top: 0;
		color: #888;
		font-size: 30rpx;
	}

	.sortBox {
		color: #888;
		height: 75rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

/* 	.head_inputBox { */
/* 		padding: 0 24rpx;
		margin: 30rpx;
		border: 1px solid #002B56;
		border-radius: 17rpx;
	}

	.news-wrap {
		margin-left: 20rpx;
		line-height: 45rpx;
		color: #333333;
	}

	.newsTxt {
		width: 340rpx;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tips {
		width: 30rpx;
		height: 30rpx;
	}

	.newsTip {
		background: #F4E5C3;
		display: inline-block;
		padding: 0 8rpx;
		font-size: 22rpx;
		margin-right: 8rpx;
		border-radius: 10rpx;
	}

	.dataList {
		margin-top: 10px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;
		margin-top: 20rpx;
	} */






	.list-cell {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.dropdown-item {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 24rpx 0 24rpx;
		box-sizing: border-box;
		/* justify-content: space-between; */

	}

	.select_item {
		border: 1px solid #eee;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #666;
		padding: 0 20rpx;
		height: 60rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.select_item u-icon {
		margin-left: 10rpx;
	}

	.tab-list-li {
	
		// padding: 20rpx 0;
	}

	.page {
		margin-bottom: 30rpx;
	}
	
	
	
	.car-list-item{
		border-bottom: 2rpx solid #f7f7f7;
		padding: 24rpx 0 24rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.item-img{
			width: 180rpx;
			height: 135rpx;
			border-radius: 8rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.item-text{
			flex: 1;
			margin-left: 24rpx;
			.item-text-title{
				font-size: 30rpx;
				font-weight: bolder;
				color: #333;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.item-text-title2{
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #999;
			}
			.item-text-title3{
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>
